<template>
    <view class="imginfo" :class="`imginfo` + (imageIndex % 4)">
        <image class="frame" :src="'../../static/searchResults/yalongwan/frame' + (imageIndex % 4) + '.png'"></image>
        <view class="location" :class="`location` + (imageIndex % 8)"></view>
        <view class="photo-box" @click="gotoPreView"><image :src="imageInfo.image_url_t" mode="aspectFill"></image></view>
        <CheckItem class="check-item" :selected="imageInfo.isSelected" @selectPhoto="selectPhoto"></CheckItem>
    </view>
</template>
<script>
import CheckItem from './CheckItem.vue';
export default {
    name: '',
    data() {
        return {};
    },
    props: {
        imageInfo: {
            type: Object,
            require: true
        },
        imageIndex: {
            type: Number,
            require: true
        }
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        gotoPreView() {
            this.$emit('gotoPreView', this.imageInfo);
        },
        selectPhoto() {
            this.$emit('selectPhoto', this.imageIndex);
        }
    },
    components: { CheckItem }
};
</script>
<style lang="less" scoped="scoped">
.imginfo {
    position: relative;
    width: 660rpx;
    .frame {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .location {
        position: absolute;
        background-size: cover;
        height: 60rpx;
        z-index: 2;
    }
    .photo-box {
        position: absolute;
        background: #fff;
        border-radius: 8rpx;
        image {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
        }
    }
}
.location0 {
    left: 20rpx;
    top: 4rpx;
    width: 247rpx;
    background-image: url(../../static/searchResults/yalongwan/location0.png);
}
.location1 {
    right: 10rpx;
    top: 18rpx;
    width: 118rpx;
    background-image: url(../../static/searchResults/yalongwan/location1.png);
}
.location2 {
    left: 18rpx;
    top: 4rpx;
    width: 176rpx;
    background-image: url(../../static/searchResults/yalongwan/location2.png);
}
.location3 {
    left: 184rpx;
    top: 15rpx;
    width: 148rpx;
    background-image: url(../../static/searchResults/yalongwan/location3.png);
}
.location4 {
    left: 20rpx;
    top: 4rpx;
    width: 148rpx;
    background-image: url(../../static/searchResults/yalongwan/location4.png);
}
.location5 {
    right: 10rpx;
    top: 18rpx;
    width: 149rpx;
    background-image: url(../../static/searchResults/yalongwan/location5.png);
}
.location6 {
    left: 18rpx;
    top: 4rpx;
    width: 519rpx;
    background-image: url(../../static/searchResults/yalongwan/location6.png);
}
.location7 {
    left: 184rpx;
    top: 15rpx;
    width: 153rpx;
    background-image: url(../../static/searchResults/yalongwan/location7.png);
}
.imginfo0 {
    height: 506rpx;
    .photo-box {
        left: 58rpx;
        top: 105rpx;
        width: 448rpx;
        height: 296rpx;
    }
    .check-item {
        position: absolute;
        right: 84rpx;
        bottom: 0;
    }
}

.imginfo1 {
    height: 396rpx;
    .photo-box {
        left: 224rpx;
        top: 80rpx;
        width: 412rpx;
        height: 268rpx;
    }
    .check-item {
        position: absolute;
        right: 396rpx;
        bottom: 0;
    }
}

.imginfo2 {
    height: 504rpx;
    .photo-box {
        left: 96rpx;
        top: 88rpx;
        width: 498rpx;
        height: 340rpx;
    }
    .check-item {
        position: absolute;
        right: 0rpx;
        bottom: 0;
    }
}
.imginfo3 {
    height: 474rpx;
    .photo-box {
        left: 62rpx;
        top: 74rpx;
        width: 250rpx;
        height: 340rpx;
    }
    .check-item {
        position: absolute;
        right: 550rpx;
        bottom: 10rpx;
    }
}
</style>
